<template>
	<view>
		<view class="product-detail">
			<view class="product-info">
				<view class="logo-name">
					<image class="logo" :src="data.logo" mode="aspectFill"></image>
					<text class="name">{{data.name}}</text>
				</view>
				<view class="company-web">
					<text class="company">{{data.companyName}}</text>
					<text class="web">公司官网</text>
				</view>
				<view class="des">
					<text class="des-label" :class="des_showAll ? 'des_showAll' :'' "><text
							style="color: #999999;">简介：</text>{{data.des}}</text>
					<view class="des-show" @tap="showDes" v-if="!des_showAll">
						<text class="des-show-label">展开</text>
						<uni-icons type="down" size="14" color="rgb(41, 121, 255)"></uni-icons>
					</view>
				</view>
				<view class="other1">
					<view class="other1-item">
						<text class="label">在线门店数</text>
						<text class="value">{{data.stores}}</text>
					</view>
					<view class="other1-item">
						<text class="label">人均消费</text>
						<text class="value">{{data.perCapita}}</text>
					</view>
					<view class="other1-item">
						<text class="label">公司总部</text>
						<text class="value">{{data.companyAddress}}</text>
					</view>
					<view class="other1-item">
						<text class="label">成立年份</text>
						<text class="value">{{data.createTime}}</text>
					</view>
				</view>
				<view class="other2">
					<view class="other2-item">
						<image class="img" src="../../static/logo.png" mode="aspectFill"></image>
						<text class="label">工商信息</text>
					</view>
					<view class="other2-item">
						<image class="img" src="../../static/logo.png" mode="aspectFill"></image>
						<text class="label">商标情况 {{data.trademark}}</text>
					</view>
					<view class="other2-item">
						<image class="img" src="../../static/logo.png" mode="aspectFill"></image>
						<text class="label">融资历史</text>
					</view>
					<view class="other2-item">
						<image class="img" src="../../static/logo.png" mode="aspectFill"></image>
						<text class="label">采用供应商 {{data.supplier}}</text>
					</view>
				</view>
				<view class="updateTime-tip">
					<text class="updateTime-label">{{data.updateTime}}更新</text>
					<text class="updateTime-tip-label">每月月初更新，数据来源于网络，实际以品牌官方为主</text>
				</view>
			</view>
			<view class="item-menu">
				<text class="title">产品与菜单</text>
				<scroll-view scroll-x="true">
					<view class="item-menu-box">
						<block v-for="item in data.productMenu" :key="item.id">
							<view class="item">
								<image class="item-img" :src="item.img" mode="aspectFill"></image>
								<text class="item-label">{{item.label}}</text>
							</view>
						</block>
					</view>
				</scroll-view>
				<view class="more">
					<text class="more-label">全部{{data.allProductTotal}}款产品</text>
					<uni-icons type="right" size="14" color="rgb(41, 121, 255)"></uni-icons>
				</view>
			</view>
			<view class="stores-distribution">
				<text class="title">门店分布情况</text>
				<view class="content">
					<uni-grid :column="3" borderColor="#ffffff" :square="false">
						<uni-grid-item>
							<view class="content-item">
								<text class="item-label">现有门店数</text>
								<text class="item-value">{{data.stores}}</text>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="content-item">
								<text class="item-label">覆盖省份</text>
								<text class="item-value">33</text>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="content-item">
								<text class="item-label">覆盖城市</text>
								<text class="item-value">35</text>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="content-item">
								<text class="item-label">口碑评分</text>
								<text class="item-value">77.78</text>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="content-item">
								<text class="item-label">省份集中度</text>
								<text class="item-value">7.08%</text>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="content-item">
								<text class="item-label">城市集中度</text>
								<text class="item-value">2.21%</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
		</view>
		<view class="product-chart-map">
			<canvas ref="myMapChart" :style="{width: '100%', height: '400px'}"></canvas>
			<view class="more">
				<text class="more-label">查看门店信息</text>
				<uni-icons type="right" size="14" color="rgb(41, 121, 255)"></uni-icons>
			</view>
		</view>
		<view class="product-expand-stores">
			<view class="time_line_box" style="height: 500rpx;overflow: hidden;">
				<!-- <time-line :time_line_list="time_line_list" ref="timeline" location="left" title="品牌拓店里程碑"></time-line> -->
			</view>
			<view class="more">
				<text class="more-label">查看全部里程碑</text>
				<uni-icons type="right" size="14" color="rgb(41, 121, 255)"></uni-icons>
			</view>
		</view>
		<view class="product-chart-city">
			<canvas ref="myCityChart" :style="{width: '50%', height: '300px'}"></canvas>
		</view>
	</view>
</template>

<script>
	// 引入echarts
	import * as echarts from 'echarts';
	import 'echarts/map/js/china.js'
	// import timeLine from '../../components/xuan-timeLine/xuan-timeLine.vue';
	export default {
		// components:{ timeLine },
		data() {
			return {
				data: {
					logo: '../../static/logo.png', //logo
					name: '星巴克', // 品牌名称
					companyName: '公司名称', //公司名称
					companyWeb: 'https://statbucks.com', //公司官网
					des: '用户体验提升:通过使用ECharts创建交互式图表,可以为uniapp项目增加更多的用户交互性和可操作性。例如,可以通过点击、拖拽、缩放等交互操作,实现对图表数据的动',
					trademark: 166, // 商标情况
					supplier: 21, // 采用供应商
					stores: 32567, // 在线门店数
					perCapita: 7.65, // 人均消费
					companyAddress: '郑州', // 公司地址
					createTime: 2008, // 成立年份
					updateTime: '2024.10.21',
					productMenu: [{
							id: 1,
							img: '../../static/logo.png',
							label: '芝士奶盖富桂茶'
						}, {
							id: 1,
							img: '../../static/logo.png',
							label: '芝士奶盖富桂茶'
						},
						{
							id: 2,
							img: '../../static/logo.png',
							label: '芝士奶盖富桂茶'
						},
						{
							id: 3,
							img: '../../static/logo.png',
							label: '芝士奶盖富桂茶'
						},
						{
							id: 4,
							img: '../../static/logo.png',
							label: '芝士奶盖富桂茶'
						},
						{
							id: 5,
							img: '../../static/logo.png',
							label: '芝士奶盖富桂茶'
						},
						{
							id: 6,
							img: '../../static/logo.png',
							label: '芝士奶盖富桂茶'
						},
						{
							id: 7,
							img: '../../static/logo.png',
							label: '芝士奶盖富桂茶'
						},
						{
							id: 8,
							img: '../../static/logo.png',
							label: '芝士奶盖富桂茶'
						},
						{
							id: 9,
							img: '../../static/logo.png',
							label: '芝士奶盖富桂茶'
						},
						{
							id: 10,
							img: '../../static/logo.png',
							label: '芝士奶盖富桂茶'
						},
					],
					allProductTotal: 76,

				},
				// echarts实例
				chart: null,
				time_line_list: [{
						title: '2015.11.11',
						title_span: '匆匆',
						content: '燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时候。'
					},
					{
						title: '2016.11.11',
						title_span: '日子',
						content: '我不知道他们给了我多少日子，但我的手确乎是渐渐空虚了。我不禁头涔涔而泪潸潸了。'
					},
					{
						title: '2017.11.11',
						title_span: '你好',
						content: '时间就像海绵里的水，只要愿挤，总还是有的。'
					},
					{
						title: '2018.11.11',
						title_span: '你好',
						content: '倘只看书，便变成书橱。'
					},
					{
						title: '2019.11.11',
						title_span: '你好',
						content: '不满是向上的车轮，能够载着不自满的人前进。'
					},
					{
						title: '2020.11.11',
						title_span: '你好',
						content: '小的时候，不把他当人，大了以后也做不了人。'
					},
					{
						title: '2021.11.11',
						title_span: '你好',
						content: '无情未必真豪杰，怜子如何不丈夫。'
					},
					{
						title: '2022.11.11',
						title_span: '你好',
						content: '凡事总须研究，才会明白。'
					},
					{
						title: '2023.11.11',
						title_span: '你好',
						content: '哪里有天才，我是把别人喝咖啡的工夫都用在了工作上了。'
					},
					{
						title: '2024.11.11',
						title_span: '你好',
						content: '让别人过得舒服些，自己没有幸福不要紧，看见别人得到幸福生活也是舒服的。'
					},
					{
						title: '2024.11.11',
						title_span: '你好',
						content: '我觉察他去的匆匆了，伸出手遮挽时，他又从遮挽着的手边过去，天黑时，我躺在床上，他便伶伶俐俐地从我身上跨过，从我脚边飞去了。等我睁开眼和太阳再见，这算又溜走了一日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了。'
					},
					{
						title: '2024.11.11',
						title_span: '你好',
						content: '我觉察他去的匆匆了，伸出手遮挽时，他又从遮挽着的手边过去，天黑时，我躺在床上，他便伶伶俐俐地从我身上跨过，从我脚边飞去了。等我睁开眼和太阳再见，这算又溜走了一日。我掩着面叹息。但是新来的日子的影儿又开始在叹息里闪过了。'
					},
				],
				des_showAll: false
			}
		},
		mounted() {
			this.$nextTick(() => {
				const myMapChart = echarts.init(this.$refs.myMapChart.$el);
				const option = {
					tooltip : {
						trigger: 'item'
					},
					// legend: {
					// 	orient: 'vertical',
					// 	x:'left',
					// 	y:'bottom',
					// 	data:['iphone3']
					// },
					 visualMap: {
						min: 0,
						max: 900,
						left: 'left',
						top: 'bottom',
						text: ['高', '低'], // 文字，默认为数值文本
						calculable: true,
						color: ['#034ac0', '#2c76f2', '#649eff', '#a6c3f3', '#c1d4f5']
					},
					label: {
						show: true, // 显示标签
						position: 'bottom', // 标签位置
						formatter: function (params) {
							// 格式化显示的数据
							return params.name + '\n' + params.value;
						}
					},
					backgroundColor:"#ffffff",
					series : [
						{
							name: '店铺',
							type: 'map',
							mapType: 'china',
							showLegendSymbol: false,
							roam: false,
							itemStyle:{
								normal:{label:{show:true}},
								emphasis:{label:{show:true}}
							},
							data:[
								{name: '北京',value: Math.round(Math.random()*100)},
								{name: '天津',value: Math.round(Math.random()*100)},
								{name: '上海',value: Math.round(Math.random()*10)},
								{name: '重庆',value: Math.round(Math.random()*1400)},
								{name: '河北',value: Math.round(Math.random()*1)},
								{name: '河南',value: Math.round(Math.random()*100)},
								{name: '云南',value: Math.round(Math.random()*1005)},
								{name: '辽宁',value: Math.round(Math.random()*10)},
								{name: '黑龙江',value: Math.round(Math.random()*1000)},
								{name: '湖南',value: Math.round(Math.random()*100)},
								{name: '安徽',value: Math.round(Math.random()*160)},
								{name: '山东',value: Math.round(Math.random()*100)},
								{name: '新疆',value: Math.round(Math.random()*1500)},
								{name: '江苏',value: Math.round(Math.random()*10)},
								{name: '浙江',value: Math.round(Math.random()*100)},
								{name: '江西',value: Math.round(Math.random()*100)},
								{name: '湖北',value: Math.round(Math.random()*100)},
								{name: '广西',value: Math.round(Math.random()*103)},
								{name: '甘肃',value: Math.round(Math.random()*1040)},
								{name: '山西',value: Math.round(Math.random()*100)},
								{name: '内蒙古',value: Math.round(Math.random()*100)},
								{name: '陕西',value: Math.round(Math.random()*100)},
								{name: '吉林',value: Math.round(Math.random()*10)},
								{name: '福建',value: Math.round(Math.random()*10)},
								{name: '贵州',value: Math.round(Math.random()*100)},
								{name: '广东',value: Math.round(Math.random()*100)},
								{name: '青海',value: Math.round(Math.random()*100)},
								{name: '西藏',value: Math.round(Math.random()*100)},
								{name: '四川',value: Math.round(Math.random()*100)},
								{name: '宁夏',value: Math.round(Math.random()*1)},
								{name: '海南',value: Math.round(Math.random()*100)},
								{name: '台湾',value: Math.round(Math.random()*100)},
								{name: '香港',value: Math.round(Math.random()*100)},
								{name: '澳门',value: Math.round(Math.random()*100)}
							]
						}
					]
				};
				myMapChart.setOption(option);
				
				
				const myCityChart = echarts.init(this.$refs.myCityChart.$el);
				const cityOption = {
					tooltip : {
						trigger: 'item',
						formatter: "{b}<br/>{d}%"
					},
					backgroundColor:"#fff",
					series : [
						{
							type:'pie',
							radius : [60, 80],
							itemStyle: {
							  normal: {
								labelLine: {
								  show: false
								},
								label: {
								  show: false
								},
								borderRadius: 5,
								borderColor: '#fff',
								borderWidth: 5
							  },

							},
							data:[
								{value:335, name:'一线', itemStyle: {color: '#FF0000'}},
								{value:310, name:'新一线', itemStyle: {color: '#00FF00'}},
								{value:234, name:'二线', itemStyle: {color: '#FFFF00'}},
								{value:135, name:'三线', itemStyle: {color: '#0000FF'}},
								{value:1048, name:'四线', itemStyle: {color: '#FF00FF'}},
								{value:251, name:'五线', itemStyle: {color: '#Fd0777'}},
								{value:102, name:'其他', itemStyle: {color: '#999999'}}
							]
						}
					]
				};
				myCityChart.setOption(cityOption);
			});
			// this.$refs.timeline.init(this.time_line_list.length);
		},
		methods: {
			showDes() {
				this.des_showAll = true;
			},
			// 更新图表的方法
			updateChart() {
				// 假设有新的配置项
				const newOption = {
					// ... 新的配置项
				};
				// 应用新的配置项
				this.chart.setOption(newOption);
			}
		}
	}
</script>

<style scoped lang="scss">
	.product-detail {
		padding: 60rpx 40rpx;
		color: #333333;
		background: #ffffff;

		.product-info {
			.logo-name {
				display: flex;
				align-items: flex-start;

				.logo {
					width: 120rpx;
					height: 120rpx;
					border-radius: 20rpx;
				}

				.name {
					margin-left: 32rpx;
					font-size: 36rpx;
					font-weight: 600;
				}
			}

			.company-web {
				margin-top: 20rpx;

				.company {
					font-size: 28rpx;
					font-weight: 600;
				}

				.web {
					margin-left: 20rpx;
					border: 1rpx solid rgb(41, 121, 255);
					background: rgba(41, 121, 255, .4);
					padding: 4rpx 5rpx;
					border-radius: 10rpx;
					font-weight: 600;
					font-size: 24rpx;
				}
			}

			.des {
				margin-top: 20rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;

				.des-label {
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-word;
					word-break: break-all;
					flex: 1;
					color: #666666;
				}

				.des_showAll {
					display: flex;
				}

				.des-show-label {
					margin-left: 20rpx;
					color: rgb(41, 121, 255);
				}
			}

			.other1 {
				margin-top: 20rpx;
				display: flex;
				text-align: center;
				justify-content: space-between;

				.other1-item {
					display: flex;
					flex-direction: column;
					font-size: 24rpx;

					.label {
						color: #666666;
						display: block;
						margin-bottom: 5rpx;
					}

					.value {
						font-weight: 600;
					}
				}
			}

			.other2 {
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;

				.other2-item {
					display: flex;
					flex-direction: column;
					font-size: 28rpx;
					align-items: center;

					.img {
						width: 60rpx;
						height: 60rpx;
					}

					.label {
						color: #666666;
						display: block;
						margin-top: 10rpx;
					}
				}
			}

			.updateTime-tip {
				display: flex;
				border-top: 1rpx solid #cbc8c8;
				border-bottom: 1rpx solid #cbc8c8;
				font-size: 20rpx;
				justify-content: space-between;
				padding: 20rpx 0;
				margin-top: 20rpx;

				.updateTime-label {
					color: orangered;
					font-weight: 600;
				}

				.updateTime-tip-label {
					color: #666666;
				}
			}
		}

		.item-menu {
			margin-top: 20rpx;

			.title {
				font-weight: 600;
				letter-spacing: 4rpx;
			}

			.item-menu-box {
				display: flex;
				gap: 20rpx;
				font-size: 20rpx;
				margin-top: 20rpx;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.item-img {
						width: 160rpx;
						height: 160rpx;
					}

					.item-label {
						display: block;
						margin-top: 20rpx;
					}
				}
			}

			.more {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;
				font-size: 24rpx;
				color: rgb(41, 121, 255);
			}
		}

		.stores-distribution {
			margin-top: 20rpx;

			.title {
				font-weight: 600;
				letter-spacing: 4rpx;
			}

			.content {
				margin-top: 20rpx;
				text-align: center;

				.content-item {
					padding: 20rpx 20rpx;
					display: flex;
					flex-direction: column;
					background: #f5f5f5;

					.item-label {
						font-size: 24rpx;
						color: #666666;
					}

					.item-value {
						font-size: 24rpx;
						font-weight: 600;
					}
				}
			}
		}
	}
	
	.product-chart-map {
		.more {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;
			font-size: 24rpx;
			color: rgb(41, 121, 255);
		}
	}
	
	.product-expand-stores {
		.more {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;
			font-size: 24rpx;
			color: rgb(41, 121, 255);
		}
	}

	image {
		width: 100rpx;
		height: 100rpx;
	}
</style>